<template>
  <el-form :model="form" label-width="100px" class="mt-4">
    <el-form-item :label="t('用户名')">
      <el-input v-model="form.username"/>
    </el-form-item>

    <el-form-item :label="t('个性签名')">
      <el-input v-model="form.quote"/>
    </el-form-item>
    <el-form-item :label="t('电子邮箱')">
      <el-input v-model="form.email"/>
    </el-form-item>

    <el-form-item :label="t('头像')">
      <UploadCmp v-model="form.avatar"></UploadCmp>
    </el-form-item>
    <el-form-item :label="t('语言')">
      <el-select v-model="locale" style="--el-select-width: 10rem">
        <el-option v-for="item in LANGUAGE_ENUM" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submit">{{ t('保存') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {computed} from 'vue'
import {useI18n} from "vue-i18n";
import UploadCmp from "@/components/UploadCmp.vue";
import {LANGUAGE_ENUM} from "@/api/_const.js";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({})
  }
})
const emit = defineEmits(['update:modelValue'])

const form = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})
const submit = () => {
  emit('update', form.value)
}

const {t, locale} = useI18n()

</script>

<style>
.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
</style>